<template>
  <!-- 查询条件部分 -->
  <el-container class="custom__container">
    <el-main class="custom__main">
      <hsa-adaptive-container>
        <!-- 查询 -->
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="查询条件">
              <el-form label-width="100">
                <hsa-row :gutter="20">
                  <hsa-col :span="8">
                    <el-form-item label="大屏名称">
                      <el-input />
                    </el-form-item>
                  </hsa-col>
                  <template #footbar>
                    <el-button type="default">重置</el-button>
                    <el-button type="primary">搜索</el-button>
                  </template>
                </hsa-row>
              </el-form>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>
      

      <!-- 大屏信息部分 -->
      <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="大屏信息" fill>
              <template #toolbar>
                <el-row style="width:'400px'">

                  <el-button type="primary" @click="useTemplate">使用模板</el-button>
                  <el-button type="primary" @click="createNew">新建</el-button>
                  <div class="page-type">
                    <el-radio-group v-model="layoutMode" @change="changeLayoutMode">
                      <el-radio-button label="layFlat">平铺</el-radio-button>
                      <el-radio-button label="tree">树形</el-radio-button>
                    </el-radio-group>
                  </div>
                </el-row>
              </template>

              <div class="screen-list" v-if="layoutMode == 'layFlat'">
                <template v-for="(screen, index) in currentScreenList" :key="index">
                  <ScreenCard :data="screen" />
                </template>
              </div>
            <template v-else>
              <template v-for="(screenSet, index) in treeScreenList" :key="index">
                <div class="date-title">{{ screenSet.date }}</div>
                <div class="screen-list">
                  <tempalte
                    v-for="(screen, index) in screenSet.screen"
                    :key="index"
                  >
                    <ScreenCard :data="screen" />
                  </tempalte>
                </div>
              </template>
            </template>
            <!-- 分页部分 -->
            <div class="pagination-container">
              <el-pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :total="screenList.length"
                @size-change="handlePageSizeChange"
                @current-change="handleCurrentPageChange"
              />
            </div>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>
      <template-list ref="temListPopup"></template-list>
    </hsa-adaptive-container>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { screenListMock } from "./configuration/list-mock";
import TemplateList from "./popup/template-list.vue";
import ScreenCard from "./components/screenCard.vue";
// 模拟大屏数据
const screenList = ref(screenListMock);

const treeScreenList: any = ref([]);
/**
 * 模板列表弹窗
 */
const temListPopup: any = ref(null);
// 当前页码
const currentPage = ref(1);
// 每页显示数量
const pageSize = ref(6);
// 当前显示的大屏列表
const currentScreenList: any = ref([]);
// 布局模式
const layoutMode = ref("layFlat");
const getData = () => {
  if (layoutMode.value == "tree") {
    treeScreenList.value = [];
    screenListMock.forEach((screenItem) => {
      let item = treeScreenList.value.find((o: any) => {
        return o.date == screenItem.date;
      });
      // return
      if (item) {
        item.screen.push(screenItem);
      } else {
        treeScreenList.value.push({
          date: screenItem.date,
          screen: [screenItem],
        });
      }
      console.log(treeScreenList.value, 7777);
    });
  }
};
const changeLayoutMode = () => {
  getData();
};
// 查询方法
const handleQuery = () => {
  console.log("执行查询操作");
};

// 重置方法
const handleReset = () => {
  console.log("执行重置操作");
};

// 使用模板方法
const useTemplate = () => {
  console.log("使用模板操作");
  temListPopup.value.openPopup();
};

// 新建方法
const createNew = () => {
  console.log("新建大屏操作");
};

// 处理每页数量变化
const handlePageSizeChange = (newSize: number) => {
  pageSize.value = newSize;
  updateCurrentScreenList();
};

// 处理当前页码变化
const handleCurrentPageChange = (newPage: number) => {
  currentPage.value = newPage;
  console.log(newPage);
  updateCurrentScreenList();
};

// 更新当前显示的大屏列表
const updateCurrentScreenList = () => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  currentScreenList.value = screenList.value.slice(startIndex, endIndex);
};

// 初始化当前显示的大屏列表
updateCurrentScreenList();
</script>

<style scoped>
@import "./styles/style.css";
</style>
